<template>
	<view>

		<view v-if="vehicleData.length > 0">
			<view class='box'  v-for="(item, index) in vehicleData" :key="index" @click="itemClick(item)">
				<view class='box-head'>
					<text >
						订单编号:{{filterNull(item.orderCarCode)}}
					</text>
					<u-icon name="arrow-right" color="#333" size="14" style='margin-top:5upx'></u-icon>
					
				</view>
				<view class='line'></view>
				<!-- <text >
					{{item.flowStatusShow}}
				</text> -->
				<view class='box-center'>
					<view class='box-center-left'>
						<view class='box-carnum'>{{filterNull(item.carNo)}}</view>
						<view class='box-cartype'>{{filterNull(item.brandSeriesModelName)}}</view>
					</view>
					<view class='box-center-right'>
						<image class='img' :src="item.modelUrl | mmvImageUrl" mode="aspectFill"></image>
					</view>
				</view>
				<view class='line1'></view>
				<view v-if="item.myCarBusinessList.length > 0" class='box-bottom'>
					<view class='box-bottom-value' v-for="(childItem, childIndex) in item.myCarBusinessList" :key="childItem.businessType">
						<text class="title">{{childItem.businessName}}:</text>
						<text class="value">{{childItem.prompt}}</text>
					</view>
				</view>

			</view>

			<u-loadmore :status="loadingStatus" @loadmore="clickloadmore"></u-loadmore>
		</view>

		<no-data v-else></no-data>

	</view>
</template>

<script>
	import {
		carlist
	} from '../../../../common/api.js';

	export default {
		data() {
			return {
				pageNo: 1,
				pageSize: 10,
				loadingStatus: 'loading',
				vehicleData:[]
				// vehicleData: [{modelUrl:'',orderCarCode:"123",flowStatusShow:'123',carNo:"123",brandSeriesModelName:"suhdiuhshcsihcishcihscihichisdhc sichisdhcihsichsdhcihcdihiu",myCarBusinessList:[{prompt:"1213",businessName:'123'},{prompt:"1213",businessName:'123'},{prompt:"1213",businessName:'12的丰富3'},{prompt:"1大声道213",businessName:'123'}]},
				// {modelUrl:'https://qa-ezulin-01.oss-cn-beijing.aliyuncs.com/XA/common/2024/12/27/88650a885d25451e871a70f6db99f936.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20250110T031528Z&X-Amz-SignedHeaders=host&X-Amz-Credential=LTAI5t7LrYxXGqQmSq3h3ZxX%2F20250110%2Fcn-north-1%2Fs3%2Faws4_request&X-Amz-Expires=3600&X-Amz-Signature=724b0ce24a7d6e8b233be1efdebdad0cced290f3a298ffc5c0cb54ad90c9de41',orderCarCode:"123",flowStatusShow:'123',carNo:"123",brandSeriesModelName:"suhdiuhshcsihcishcihscihichisdhc sichisdhcihsichsdhcihcdihiu",myCarBusinessList:[{prompt:"1213",businessName:'123'},{prompt:"1213",businessName:'123'},{prompt:"1213",businessName:'12的丰富3'},{prompt:"1大声道213",businessName:'123'}]}]
			}
		},

		onLoad() {
			this.getData()
		},

		methods: {

			getData() {
				carlist({
					params: {
						pageNo: this.pageNo,
						pageSize: this.pageSize
					}
				}).then(res => {
					if (this.pageNo == 1) {
						this.vehicleData = [];
						this.pageNo++;
						// uni.stopPullDownRefresh();

						this.loadingStatus = 'loadmore';
					} else {
						if (!uni.$u.test.isEmpty(res)) {
							this.pageNo++;

							this.loadingStatus = 'loadmore';
						} else {

							this.loadingStatus = 'nomore';
						}
					}

					if (!uni.$u.test.isEmpty(res)) {
						this.vehicleData = this.vehicleData.concat(res);
					}


				})
			},

			clickloadmore() {
				this.getData();
				this.showloading = true;
				this.loadingStatus = 'loading';
			},


			itemClick(item) {
				// getApp().globalData.vehicleData = item;

				if (item.carId) {
					uni.navigateTo({
						url: './mycardetail?carId=' + item.carId
					})
				}

			}

		},
		onPullDownRefresh() {
			this.pageNo = 1;
			this.getData();
		},

		onReachBottom() {
			this.getData();
			this.showloading = true;
			this.loadingStatus = 'loading';
		}

	}
</script>

<style lang="scss" scoped>
	.box{
		margin:24upx 32upx ;
		border-radius: 8upx;
		.box-head{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color:rgba(255, 255, 255, 0.5) ;
			padding:24upx 32upx;
			text{
				font-size:24upx ;
				color:#469428;
			}
		}
		.line{
			width: 100%;
			height: 2upx;
			background-color: #ffffff;
		}
		.box-center{
			display: flex;
			justify-content: space-between;
			padding:40upx 32upx;
			background: linear-gradient(to right bottom, rgba(251, 253, 254, 0.80),#EBF6FE, rgba(245, 250, 254, 0.82) );
			.box-center-left{
				width: 70%;
				.box-carnum{
					color:#000000;
					font-size: 32upx;
					font-weight: bold;
					margin-bottom: 16upx;
				}
				.box-cartype{
					width:100%;
					color:#999999 ;
					font-size: 24upx;
				}
			}
			.box-center-right{
				width: 30%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.img{
					width:208upx ;
					height: 100upx;
				}
			}
			
		}
		.line1{
			width: 98%;
			border: 1upx dashed rgba(23, 59, 66, 0.2);
		}
		.box-bottom{
			background-color: #ffffff;
			padding: 32upx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.box-bottom-value{
				width:45%;
				margin-bottom:8upx ;
				text-align: left;
				font-size: 24upx;
				color:#666666;
			}
		}
	}
</style>
